<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col  :span="20">
        <div class="company_name_detail">
          <div class="company_log">公司名称</div>
          <span class="text-comname">{{ companyDetail.comName }}</span></div>
          <el-tag class="company_status"> {{ companyDetail.regStatus }}</el-tag>
        <div class="unlock"><el-button type="primary">解锁</el-button></div>
        <div class="export"><el-button type="primary">导出</el-button></div>
        <div class="addmycus"><el-button type="primary">导出</el-button></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="7">
        <div class="flex-row align-center mb-10">
          <span class="el-icon-postcard"></span>
          <span class="text-info">统一社会信用代码: </span>
          <span>{{ companyDetail.creditCode }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-user"></span>
          <span class="text-info">法定代表人：</span>
          <span class="text-primary">{{ companyDetail.regUser }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-tickets"></span>
          <span class="text-info">注册资本：</span>
          <span>{{ companyDetail.regFundStr }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-date"></span>
          <span class="text-info">成立时间：</span>
          <span>{{ companyDetail.regTime }}</span>
        </div>
			</el-col>
      <el-col :span="7">
        <div class="flex-row align-center mb-10">
          <span class="el-icon-postcard"></span>
          <span class="text-info">电话: </span>
          <span>{{ companyDetail.linkTel }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="text-info">(数据来源于企业年报和互联网)</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-tickets"></span>
          <span class="text-info">邮箱: </span>
          <span>{{ companyDetail.email }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-date"></span>
          <span class="text-info">地址: </span>
          <span>{{ companyDetail.address }}</span>
        </div>
			</el-col>
      <el-col :span="7">
        <div class="flex-row align-center mb-10">
          <span class="el-icon-postcard"></span>
          <span class="text-info">官网: </span>
          <span>{{ companyDetail.website }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-user"></span>
          <span class="text-info">行业：</span>
          <span class="text-primary">{{ companyDetail.trade }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-tickets"></span>
          <span class="text-info">营业期限：</span>
          <span>{{ companyDetail.tradeTime }}</span>
        </div>
        <div class="flex-row align-center mb-10">
          <span class="el-icon-date"></span>
          <span class="text-info">核验日期：</span>
          <span>{{ companyDetail.checkTime }}</span>
        </div>
			</el-col>
    </el-row>
    <el-divider content-position="left">工商信息</el-divider>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first">
        <table class="table-box">
          <tbody>
            <tr>
						  <td class="t-title">统一社会信用代码</td>
					  </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <el-tab-pane label="经营信息" name="second">
        <el-table v-loading="loading" :data="progressList">
          <el-table-column label="序号" type="index" :index="newId" align="center" prop="newId"/>
          <el-table-column label="序号111" align="center" prop="id"/>
          <el-table-column label="任务名称" align="center" prop="comName"/>
          <el-table-column label="完成情况" align="center" prop="comName"/>
          <el-table-column label="完成时间" align="center" prop="checkTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.checkTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="progress>0"
          :total="progress"
          :page.sync="getprogressList.pageNum"
          :limit.sync="getprogressList.pageSize"
          :page-sizes="[ 5, 10, 15]"
          @pagination="pbSel(activeName)"
        />
      </el-tab-pane>
      <el-tab-pane label="法律诉讼" name="third">
        <el-table v-loading="loading" :data="attachmentList">
          <el-table-column label="序号" type="index" :index="newId" align="center" prop="newId"/>
          <el-table-column label="序号111" align="center" prop="id"/>
          <el-table-column label="上传人" align="center" prop="comName"/>
          <el-table-column label="文件名称" align="center" prop="comName">
            <template slot-scope="scope">
              <div @click="fileOpen(scope.row)" style="color: #00a2ff;cursor:pointer;">{{ scope.row.comName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" align="center" prop="regTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.regTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="pagingFileTotal>0"
          :total="pagingFileTotal"
          :page-sizes="[ 5, 10, 15]"
          :page.sync="pagingFile.pageNum"
          :limit.sync="pagingFile.pageSize"
          @pagination="pbSel(activeName)"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listCompany, getCompany, delCompany, addCompany, updateCompany, getByContract, getListprogressList, listAttachment,getManage } from "@/api/crm/company";
import d1 from '@/assets/images/d1.png';
import d2 from '@/assets/images/d2.png';
import d3 from '@/assets/images/d3.png';
import d4 from '@/assets/images/d4.png';
import d5 from '@/assets/images/d5.png';
import d6 from '@/assets/images/d6.png';
import d7 from '@/assets/images/d7.png';
import d8 from '@/assets/images/d8.png';
import d9 from '@/assets/images/d9.png';
import d10 from '@/assets/images/d10.png';
import d11 from '@/assets/images/d11.png';
import d12 from '@/assets/images/d12.png';

export default {
  name: "JobLog",
  dicts: ['sys_common_status', 'sys_job_group'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 调度日志表格数据
      jobLogList: [],
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        jobName: undefined,
        jobGroup: undefined,
        status: undefined
      },
      companyDetail: {
        comName: undefined,
        regStatus: undefined,
        regFundStr: undefined,
        regUser: undefined,
        trade: undefined,
        regTime: undefined,
        province: undefined,
        city: undefined,
        areas: undefined,
        creditCode: undefined,
        taxCode: undefined,
        regNo: undefined,
        orgCode: undefined,
        insured: undefined,
        linkTel: undefined,
        address: undefined,
        email: undefined,
        isKeyPer: undefined,
        website: undefined,
        tradeTime: undefined,
        checkTime: undefined
      },
      activeName: 'first',
      manageForm: null,
      // 项目组成员分页
      member: 0,
      ByContract: {
        pageNum: 1,
        pageSize: 5,
      },
      getListByContract: {
        pageNum: 1,
        pageSize: 5,
      },
      detailPageList:[],
      //项目进度分页
      progress: 0,
      getprogressList: {
        pageNum: 1,
        pageSize: 5,
      },
      progressList:[],
      attachmentList:[],
      //项目文件分页
      pagingFileTotal: 0,
      pagingFile: {
        pageNum: 1,
        pageSize: 5,
      },
      id:'',
      newId:0
    };
  },
  created() {
    const companyId = this.$route.query.companyId;
    console.info(companyId)
    if (companyId !== undefined && companyId != 0) {
      getCompany(companyId).then(response => {
        this.queryParams.jobName = response.data.comName;
        this.queryParams.jobGroup = response.data.comType;
        this.companyDetail.comName = response.data.comName;
        this.companyDetail.regStatus = response.data.regStatus;
        this.companyDetail.regFundStr = response.data.regFundStr;
        this.companyDetail.regUser = response.data.regUser;
        this.companyDetail.trade = response.data.trade;
        this.companyDetail.regTime = response.data.regTime;
        this.companyDetail.province = response.data.province;
        this.companyDetail.city = response.data.city;
        this.companyDetail.areas = response.data.areas;
        this.companyDetail.creditCode = response.data.creditCode;
        this.companyDetail.taxCode = response.data.taxCode;
        this.companyDetail.regNo = response.data.regNo;
        this.companyDetail.orgCode = response.data.orgCode;
        this.companyDetail.insured = response.data.insured;
        this.companyDetail.linkTel = response.data.linkTel;
        this.companyDetail.address = response.data.address;
        this.companyDetail.email = response.data.email;
        this.companyDetail.isKeyPer = response.data.isKeyPer;
        this.companyDetail.website = response.data.website;
        this.companyDetail.tradeTime = response.data.tradeTime;
        this.companyDetail.checkTime = response.data.checkTime;
      });
    } else {

    }
    this.pbSel('first');
    this.loading = false
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClick(tab) {
      console.info(121111);
      console.info(tab.name);
      this.pbSel(tab.name)
    },
    pbSel(name) {
      let row = {};
      if (name =="first"){
        row = this.ByContract;
      }else if (name =="second"){
        row = this.getprogressList;
      }else if (name =="third"){
        row = this.pagingFile;
      }
      row.type = name;
      row.id = this.global
      this.checkDetails(row);
    },
    checkDetails(row) {
      if (row.type != "second" && row.type != "third") { // 默认选择第一个tabs页
        var params = {  // 传递的参数
          contractManageId:row.id,
          type:row.type,
          // 一共有多少条数据
          pageNum: row.pageNum,
          // 一页多少数据
          pageSize: row.pageSize,
        }
        getByContract(params).then(response => {
          console.info(response.rows);
          console.info(response.total);
          this.detailPageList = response.rows;
          this.member = response.total;
        });
      } else if (row.type == "second") {
        var params = {
          contractManageId: row.id,
          type:row.type,
          // 一共有多少条数据
          pageNum: row.pageNum,
          // 一页多少数据
          pageSize: row.pageSize,
        }
        getListprogressList(params).then(response => {
          this.progressList = response.rows;
          this.progress = response.total;
        });
      } else if (row.type == "third") {
        var params = {
          contractManageId: row.id,
          type:row.type,
          // 一共有多少条数据
          pageNum: row.pageNum,
          // 一页多少数据
          pageSize: row.pageSize,
        }
        listAttachment(params).then(response => {
          this.attachmentList = response.rows;
          this.pagingFileTotal = response.total;
          for (var i = 0; i < this.attachmentList.length; i++) {
            var str = this.attachmentList[i].url
            //var nstr = str.split('/')
            this.attachmentList[i].remark = str // 将分割好后的字符给到集合中的remark
          }
        });
      }
      this.global = row.id
      this.loading = false
    },
  }
};
</script>

<style lang="scss" scoped>
	.detail-container {
		position: relative;
		padding: 20px;
	}
  .flex-row {
    padding: 8px;
    background:back;
  }
	.back-icon {
		position: absolute;
		left: -40px;
		cursor: pointer;
	}
	.icon1 {
		width: 14px;
		height: 14px;
		margin-right: 5px;
	}
	.table-box {
		width: 100%;
		border-collapse: collapse;
		border: 1px solid #eee;

		tr,
		td {
			border: 1px solid #eee;
		}
		td {
			padding: 8px;
			font-size: 14px;
		}
		.t-title {
			width: 136px;
			background-color: #f7f9ff;
		}
	}
  .el-icon-user{

  }
  .text-info {
    padding-left: 5px;
    color: #666;
  }
  .company_name_detail {
    font-weight: 1000;
    float:left;
  }
  .company_log {
    padding:10px 10px 10px 10px;
    float:left;
    width:60px;
    height:60px;
    border-radius:10px;
    background-color: rgb(152, 117, 210);
  }
  .text-comname {
    height:60px;
    line-height:60px;
    margin-left:10px;
  }
  .company_status {
    margin-left:10px;
    margin-top:18px;
  }
  .unlock {
    float:right;
    margin-right:10px;
  } 
  .export {
    float:right;
    margin-right:10px;
  }
  .addmycus {
    float:right;
    margin-right:10px;
  }
</style>
